<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>懒加载测试</title>
    <style>
        ul, li, body {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .pics {


        }

        li {
            padding: 80px;
        }

        li img {
            height: 800px;
            margin: 0 auto;
            display: block;
        }
    </style>

    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./js/jq.lazy_load.js"></script>
</head>
<body>
<div class="pics">
    <ul>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/1.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/2.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/3.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/4.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/5.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/6.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/7.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/8.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/9.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/10.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/11.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/12.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/13.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/14.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/15.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/16.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/17.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/18.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/19.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/20.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/21.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/22.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/23.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/24.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/25.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/26.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/27.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/28.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/29.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/30.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/31.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/32.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/33.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/34.jpg"></a></li>
        <li><a href="#"><img src="" alt="" class="lazy" data-original="./static/pics/35.jpg"></a></li>

    </ul>
    <script>
        $(function () {
            $("img.lazy").lazyload({effect: "fadeIn"});
        });

    </script>
</div>

</body>
</html>